<template>
   <div class='home'>
      <transition name="el-zoom-in-center">
        <div v-show="show2" class="transition-box home-top">
            <div style="width:50%">
                <el-page-header :icon="null">
                    <template #content>
                        <div class="flex items-center">
                            <el-avatar
                                :size="32"
                                class="mr-3"
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            />
                            <span class="text-large font-600 mr-3"> 张旭峰 </span>
                            <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
                                教官
                            </span>
                            <el-tag>Default</el-tag>
                        </div>
                    </template>
                </el-page-header>
                <el-descriptions title="">
                    <el-descriptions-item label="名称：">张老师</el-descriptions-item>
                    <el-descriptions-item label="手机号:">15348255342</el-descriptions-item>
                    <el-descriptions-item label="职位：">教官</el-descriptions-item>
                    <el-descriptions-item label="待办事项:">
                        <el-tag size="small">无</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="今日提醒:" style="display: flex;">
                        <span style="color:red;">今天是您的生日！祝您生日快乐</span>
                    </el-descriptions-item>
                </el-descriptions>
                
            </div>
            <div style="display: flex;   box-shadow: -2px 3px 22px -18px rgba(0, 0, 0, 0.5);">
                <div class="remind">
                    <p>0</p>
                    <div>待处理任务</div>
                </div>
                <div class="remind">
                    <p>0</p>
                    <div>待处理申请</div>
                </div>
                <div class="remind">
                    <p>0</p>
                    <div>待处理会议</div>
                </div>       
                <div class="remind">
                    <p>0</p>
                    <div>待处理公文</div>
                </div>                 
            </div>
        </div>
      </transition>
      <transition name="el-zoom-in-top">
        <div v-show="show2" class="transition-box home-content">
            <div class="home-content-left">
                <div class="flex gap-2" style="width: 100%; display: flex; justify-content: space-around;">
                    <div style=" width: 50px;">
                        <div style="display: flex; justify-content: center; ">
                            <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            />
                        </div>
                        <div style="margin-top:10px;">
                            <el-tag type="primary">任务1</el-tag>
                        </div>
                    </div>
         
                    <div style=" width: 50px;">
                        <div style="display: flex; justify-content: center;">
                            <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            />
                        </div>
                        <div style="margin-top:10px;">
                            <el-tag type="primary">事件2</el-tag>
                        </div>
                    </div>
                    <div style=" width: 50px;">
                        <div style="display: flex; justify-content: center;">
                            <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            />
                        </div>
                        <div style="margin-top:10px;">
                            <el-tag type="success">事件3</el-tag>
                        </div>
                    </div>
                    <div style=" width: 50px;">
                        <div style="display: flex; justify-content: center;">
                            <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            />
                        </div>
                        <div style="margin-top:10px;">
                            <el-tag type="info">事件4-3</el-tag>
                        </div>
                    </div>
                    <div style=" width: 50px;">
                        <div style="display: flex; justify-content: center;">
                            <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            />
                        </div>
                        <div style="margin-top:10px;">
                            <el-tag type="warning">事件5</el-tag>
                        </div>
                    </div>
                    <div style=" width: 50px;">
                        <div style="display: flex; justify-content: center;">
                            <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            />
                        </div>
                        <div style="margin-top:10px;">
                            <el-tag type="danger">Tag 5</el-tag>
                        </div>
                    </div>
      
                </div>
            </div>
            <div class="home-content-right">
                <el-button plain @click="open1"> 通知策划出来 </el-button>
                <el-alert title="Success alert" type="success" />
                <el-alert title="Info alert" type="info" />
                <el-alert title="Warning alert" type="warning" />
                <el-alert title="Error alert" type="error" />
            </div>
        </div>
      </transition>

    <transition name="el-zoom-in-bottom">
        <div v-show="show2" class="transition-box home-bottom">
            <div class="home-bottom-left">
                <p>我的日程:</p>
                <div style="display: flex;">
                    <div
                        class = "day"
                        v-for = "item in weeklySet"
                        :key = "item.id"
                        v-bind:class="{currentDate:item.id == currentWeek}"
                        >
                            <div class = "top">{{ item.label }}</div>
                            <div
                            class = "center"
                            >{{ item.date }}</div>
                            <div>{{ item.calendar }}</div>
                    </div>
                </div>
                <div >
                    <el-empty :image-size="200" style="height:301px;" />
                </div>
            </div>
            <div class="home-bottom-content">
                <el-calendar>
                    <template #date-cell="{ data }" :header='hahahahahha'>
                    <p :class="data.isSelected ? 'is-selected' : ''" :header='hahahahahha'>
                        {{ data.day.split('-').slice(1).join('-') }}
                        {{ data.isSelected ? '✔️' : '' }}
                    </p>
                    </template>
                </el-calendar>
            </div>
            <div class="home-bottom-right">

            </div>
        </div>
    </transition>
   </div>
</template>
<script>
import { getLunar } from 'chinese-lunar-calendar'
import { ElNotification } from 'element-plus'
export default {
    name: '',
    props: {},
    components: {},
    data () {
       return {
        show2: true,
        hahahahahha:'123456789',
        monthComparison: {
                1: 31,
                2: null,
                3: 31,
                4: 30,
                5: 31,
                6: 30,
                7: 31,
                8: 31,
                9: 30,
                10: 31,
                11: 30,
                12: 31
            },
            weeklySet: [
                {
                    id: 0,
                    date: null,
                    label: "周日",
                    calendar: ""
                },
                {
                    id: 1,
                    date: null,
                    label: "周一",
                    calendar: ""
                },
                {
                    id: 2,
                    date: null,
                    label: "周二",
                    calendar: ""
                },
                {
                    id: 3,
                    date: null,
                    label: "周三",
                    calendar: ""
                },
                {
                    id: 4,
                    date: null,
                    label: "周四",
                    calendar: ""
                },
                {
                    id: 5,
                    date: null,
                    label: "周五",
                    calendar: ""
                },
                {
                    id: 6,
                    date: null,
                    label: "周六",
                    calendar: ""
                }
            ],
       }
    },
    computed: {},
// 侦听器
    watch: {},
    created () {
        this.getAweekago();
      
    },
    mounted () {
        this.show2 = true
    },
// 组件方法
    methods: {
        open1(){
            ElNotification({
                title: '警告',
                message: 'This is a message that does not automatically close',
                duration: 0,
            })
            setTimeout(() =>{
                ElNotification({
                    title: 'Error',
                    message: 'T错误。不关闭会一直在',
                    type: 'error',
                    duration: 0,
                })
            },1000)
          
            setTimeout(() =>{
                ElNotification({
                    title: 'Info',
                    message: '类型有很多不关闭永远都在',
                    type: 'info',
                    duration: 0,
                })
            },2000)
        },
        enlargeDate(item ,currentWeek , agencyYear, currentMonth, referenceDate) {
            let index = item.id;
            let pendingDate = referenceDate;
            let Month = currentMonth;
            let year = agencyYear;
            while(currentWeek > index){
                if((pendingDate - 1) < 1) {
                    if(Month == 1) {
                        year -= 1;
                        Month = 12;
                        pendingDate = 31;
                    }else{
                        Month -= 1;
                        pendingDate = this.monthComparison[Month];
                    }
                }else{
                    pendingDate -= 1;
                }
                index ++;
            }
            item.date = pendingDate;
            item.calendar = this.getLunar(year,Month,pendingDate);
            return item
        },
        shrinkDate(item ,currentWeek , agencyYear, currentMonth, referenceDate) {
            let index = item.id;
            let pendingDate = referenceDate;
            let Month = currentMonth;
            let year = agencyYear;
            while(currentWeek < index){
                if((pendingDate + 1) > this.monthComparison[Month]) {
                    if(Month == 12) {
                        year += 1;
                        Month = 1;
                        pendingDate = 1;
                    }else{
                        Month += 1;
                        pendingDate = 1;
                    }
                }else{
                    pendingDate += 1;
                }
                index --;
            }
            item.date = pendingDate;
            item.calendar = this.getLunar(year,Month,pendingDate);
            return item
        },
        getLunar(agencyYear,currentMonth,referenceDate) {
            let data = getLunar(agencyYear, currentMonth, referenceDate);
            return data.dateStr.split('月')[1]?data.dateStr.split('月')[1]:data.dateStr.split('月')[0]
        },
        ConversionDate(date) {
            const agencyYear = date.getFullYear();
            const referenceDate = date.getDate();
            const currentWeek = date.getDay();
            const currentMonth = date.getMonth() + 1;
            this.weeklySet = this.weeklySet.map(item => {
                if(item.id > currentWeek) {
                    item = this.shrinkDate(item ,currentWeek , agencyYear, currentMonth, referenceDate);
                }
                if(item.id < currentWeek) {
                    item = this.enlargeDate(item ,currentWeek , agencyYear, currentMonth, referenceDate);
                }
                return item
            })
            console.log(this.weeklySet);
        },
        getAweekago(condition){
            const date = condition?new Date(condition):new Date();
            const agencyYear = date.getFullYear();
            const referenceDate = date.getDate();
            const currentWeek = date.getDay();
            const currentMonth = date.getMonth() + 1;
            this.monthComparison[2] = this.backDay(agencyYear);
            this.weeklySet[currentWeek].date = referenceDate;
            this.weeklySet[currentWeek].calendar = this.getLunar(agencyYear,currentMonth,referenceDate);
            this.currentWeek = currentWeek;
            this.ConversionDate(date);
        },
        backDay(year) {
            return ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0)?29:28;
        }
    },
// 创建前
    beforeCreate () { },
// 挂载前
    beforeMount () {},
// 更新前 
    beforeUpdate () {},
    updated () {},
// 组件创建最初始keep-alive标签中有效
    activated () { },
// 组件停用时
    deactivated () {},
// 销毁前
    beforeDestroy () {},
// 销毁后
    destroyed () {}
}
</script> 
<style scoped>
.transition-box {
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
}
.home-content-left{
    width: 60%;
    height: 100%;

}
.home-content-right{
    width: 30%;
    height: 100%;

}
.skeleton {
    padding-left: 76px;
    width: calc(100% - 76px);
    height: 112px;
    display: flex;
   
}
.day{
    flex: 1;
    display: flex;
    flex-direction:column;
    font-size: 14px;
}
.day div{
        display: flex;
        justify-content: center;
    }
.day .top{
    padding-top: 12px;
}
.day .center{
        height: 28px;
        width: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 6px auto;
        border-radius: 50%;
    }
.center{
    color: #FFFFFF;
    background: #21B1FF;
}
.currentDate{
    color: #21B1FF;
}
.is-selected {
  color: #1989fa;
}
.remind{
    width: 78px;
    height: 100%;
    border-right: 1px solid #67aef0;
}
.remind p{
    margin-top: 13px;
    font-size: 18px;
    text-align: center;
}
.remind div{
    text-align: center;
}
.home{
    width: 100%;
    height: 100%;
}
.home-top{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0% 1%;
}
.home-content{
    width: 100%;
    height: 33%;
    display: flex;
    box-shadow: -2px 29px 62px -37px rgba(0, 0, 0, 0.5);
    justify-content: space-between;
}
.home-bottom{
    width: 100%;
    height: 51%;
    display: flex;
    margin-top: 1%;
}
.home-bottom-left{
    width: calc(100% / 3);
}
.home-bottom-content{
    width: calc(100% / 3);
    overflow: auto;
}
.home-bottom-content::-webkit-scrollbar {
    width: 1px;
}
.home-bottom-right{
    width: calc(100% / 3);
}

</style>